<template>
  <el-form ref="form" :model="user" :rules="rules" label-position="right" label-width="80px" class="form">
    <el-form-item :label="$t('table.user.email')" prop="email">
      <el-input v-model="user.email" />
    </el-form-item>
    <el-form-item :label="$t('table.user.mobile')" prop="mobile">
      <el-input v-model="user.mobile" />
    </el-form-item>
    <el-form-item :label="$t('table.user.dept')" prop="deptId">
      <treeselect
        v-model="user.deptId"
        :multiple="false"
        :options="depts"
        :clear-value-text="$t('common.clear')"
        placeholder=" "
        @select="onSelect"
      />
    </el-form-item>
    <el-form-item :label="$t('table.user.sex')" prop="sex">
      <el-select v-model="user.sex" value="" placeholder="">
        <el-option value="0" :label="$t('common.sex.male') " />
        <el-option value="1" :label="$t('common.sex.female') " />
        <el-option value="2" :label="$t('common.sex.secret') " />
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('table.user.remark')" prop="remark">
      <el-input v-model="user.remark" type="textarea" rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" plain :loading="buttonLoading" @click="submit">{{ $t('common.edit') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { validMobile } from '@/utils/my-validate'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '',
          email: ''
        }
      }
    }
  },
  data() {
    return {
      depts: [],
      buttonLoading: false,
      deptName: '',
      change: false,
      rules: {
        email: { type: 'email', message: this.$t('rules.email'), trigger: 'blur' },
        mobile: { validator: (rule, value, callback) => {
          if (value !== '' && !validMobile(value)) {
            callback(this.$t('rules.mobile'))
          } else {
            callback()
          }
        }, trigger: 'blur' },
        sex: { required: true, message: this.$t('rules.require'), trigger: 'change' },
        description: { max: 100, message: this.$t('rules.noMoreThan100'), trigger: 'blur' }
      }
    }
  },
  mounted() {
    this.initDept()
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          const temp = { ...this.user }
          temp.lastLoginTime = temp.updateTime = temp.createTime = null
          this.$put('system/user/profile', { ...temp }).then(() => {
            this.buttonLoading = false
            this.$message({
              message: this.$t('tips.updateSuccess'),
              type: 'success'
            })
            if (this.change) {
              this.user.deptName = this.deptName
            }
            this.$store.commit('account/setUser', this.user)
          })
        } else {
          return false
        }
      })
    },
    onSelect(a, b) {
      this.deptName = a.label
      this.change = true
    },
    initDept() {
      this.$get('system/dept').then((r) => {
        this.depts = r.data.data.rows
      }).catch((error) => {
        console.error(error)
        this.$message({
          message: this.$t('tips.getDataFail'),
          type: 'error'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .form {
    padding: 10px 0 0 0;
  }
</style>
